<!--
 * @Author: wcc007
 * @Date: 2022-11-18 13:44:12
 * @LastEditors: WeijianXu weijian.xu@unidt.com
 * @LastEditTime: 2024-05-15 17:49:57
 * @Description: file content
 * @FilePath: \front-end-of-task-center\src\components\generator\form-extention\un-region\index.vue
-->
<template>
  <!-- <RegionSelects
    @change="regionChange"
    :city="option.city"
    :town="option.town"
    :area="option.area"
    :value="regionData"
  /> -->
  <v-distpicker :province="regionData[0] || null" :city="regionData[1] || null"
    :area="regionData[2] || null" :hide-area="hideArea" :only-province="onlyProvince"
    :disabled="isDisabled" :placeholders="placeholders" @change="regionChange"
    @change-province="changeProvince" @change-city="changeCity"
    @change-area="changeArea"></v-distpicker>
</template>

<script>
import emitter from "element-ui/lib/mixins/emitter";

export default {
  name: "UnRegion",
  mixins: [emitter],
  props: {
    /* 隐藏地区 */
    hideArea: {
      type: Boolean,
      default: false,
    },
    /* 只显示省份 */
    onlyProvince: {
      type: Boolean,
      default: false,
    },
    /* 是否禁用 */
    disabled: {
      type: Boolean,
      default: false,
    },
    value: {
      type: [Array, Object],
      default: () => ["330000"],
    },
    placeholders: {
      type: Object,
      default: () => ({
        province: "请选择省份",
        city: "请选择城市",
        area: "请选择区",
      }),
    }
  },
  inject: {
    elForm: {
      default: "",
    },
    elFormItem: {
      default: "",
    },
  },
  data() {
    return {
      regionData: [],
    };
  },
  watch: {
    value: {
      handler(val) {
        this.regionData = this.updateRegion(val || []);
        // 触发表单变更
        this.dispatch("ElFormItem", "el.form.change", val ? [val] : []);
      },
      deep: true,
    },
  },
  computed: {
    isDisabled() {
      return this.disabled || !!(this.elForm || {}).disabled;
    },
  },
  created() {
    this.regionData = this.updateRegion(this.value || []);
  },
  methods: {
    regionChange(val) {
      const regionData = this.updateRegion(val);
      this.regionData = regionData;
      this.$emit("input", [...regionData]);
      // this.updateRegion(val)
    },
    updateRegion(val) {
      if (Array.isArray(val)) {
        return val;
      }
      const { province, city, area } = val;
      const regionData = [];
      if (province && province.code) {
        regionData.push(province.code);
      }
      if (city && city.code) {
        regionData.push(city.code);
      }
      if (area && area.code) {
        regionData.push(area.code);
      }

      return regionData;
    },
    changeProvince(val) {
      if (val && val.code) {
        this.regionData = [val.code];
        this.$emit("input", [...this.regionData]);
      }
    },
    changeCity(val) {
      if (val && val.code) {
        this.regionData = [this.regionData[0], val.code];
        this.$emit("input", [...this.regionData]);
      }
    },
    changeArea(val) {
      if (val && val.code) {
        this.$set(this.regionData, "[2]", val.code);
        this.$emit("input", [...this.regionData]);
      }
    },
  },
};
</script>
<style lang="scss">
.distpicker-address-wrapper select {
  &:focus-visible {
    outline: none;
  }

  &[disabled] {
    background-color: #f5f7fa;
    border-color: #dfe4ed;
    color: #c0c4cc;
    cursor: not-allowed;
  }
}
</style>
